<template>
  <div class="role">
    <el-table :data="roles" style="width: 98%">
      <el-table-column prop="roleId" label="编号" width="100" />
      <el-table-column prop="roleName" label="名称" width="250" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.roleId)">编辑</el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete( scope.row.roleId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
//import {$list} from '../../api/role.ts'
//角色列表
let roles=ref([{roleId:2,
  roleName:'管理员',}])
//加载角色列表
const loadRoles= async ()=>{
  //roles.value=await $list({page:1,pageSize:3})
  roles.value.push({
    roleId:1,
    roleName:'管理员',
  })
}
//编辑方法
const handleEdit=(roleId:number)=>{

}
//删除方法
const handleDelete=(roleId:number)=>{

}
onMounted(()=>{
  loadRoles()
})
</script>

<style scoped lang="scss">

</style>